<%@page import="java.util.Iterator"%>
<%@page import="com.group1.bookmanagement.domain.Label"%>
<%@page import="java.util.List"%>
<%@page import="com.group1.bookmanagement.service.LabelService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>喜欢的分类</title>
<link rel="stylesheet" media="all" href="css/web-2b26d78a4d3c053b7b1c.css" />
<link rel="stylesheet" media="all" href="css/entry-083278da38874f8d45d9.css" />
<style>
.btn-active {
	background-color: #2E6DA4 !important;
	/*background-color: #ccc !important;*/
}
</style>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "//hm.baidu.com/hm.js?0c0e9d9b1e7d617b3e6842e85b9fb068";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
</script>

</head>

<body>
	<div id="recommended-modal">
		<div id="recommended-header" class="container">
			<h1 class="title">请选择你喜欢的专题</h1>
			<h2 class="subTitle">鱼书会为你定制更精准的信息流</h2>
		</div>
		<div id="recommended-modal-main"
			style="width: 200%; transform: translate(0%, 0px); transition: transform 0.5s ease-in-out;">
			<section class="" style="width: 50%;">
				<div class="container margin-bottom">
					<ul class="clearfix">
						<%
							ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml");
							LabelService labelService = (LabelService) context.getBean("labelService");
							List<Label> list = labelService.listLabel();
							for (Label label : list) {
						%>
						<li class="collection">
                            <img src="${ctx}/jsp/img/LF2.jpg">
                            <div class="info">
                                <div class="name"><%=label.getLabelName() %></div>
                            </div>
                            <%
                                User user = (User) session.getAttribute("user");
                                Iterator<Label> iterator = user.getLabels().iterator();
                                boolean isContain = false;
                                while (iterator.hasNext()) {
                                	Label next = iterator.next();
                                	if (next.equals(label)) {
                                		isContain = true;
                                	}
                                }
                               
                                if (isContain) {
                                %>
                                    <i class="iconfont ic-successed on" label-id="<%=label.getId()%>"></i>
                                <%
                                } else {
                                %>          
                                    <i class="iconfont ic-successed off" label-id="<%=label.getId()%>"></i>
                                <%          
                                }
                            %>
                        </li>
						<%
							}
						%>
					</ul>
				</div>
			</section>
			<section class="overflow-hidden " style="width: 50%;">
				<div class="container margin-bottom ">
					<div class="action clearfix ">
						<!---->
						<!---->
					</div>
					<ul class="clearfix "></ul>
				</div>
			</section>
		</div>
		<div id="recommended-footer">
			<!---->
			<button class="next disabled">确定</button>
			<button class="skip">跳过</button>
		</div>
		<!---->
	</div>
	<script src="js/web-base-a51d09be1603c14780e0.js "
		crossorigin="anonymous "></script>
	<script src="js/web-e3d64b1e6b2cbe3311b7.js " crossorigin="anonymous "></script>

	<script src="js/entry-bd2bb26fd924490e1ea7.js "
		crossorigin="anonymous "></script>

	<script>
		(function() {
			var bp = document.createElement('script');
			var curProtocol = window.location.protocol.split(':')[0];
			if (curProtocol === 'https') {
				bp.src = 'js/push.js';
			} else {
				bp.src = 'js/push.js';
			}
			var s = document.getElementsByTagName("script ")[0];
			s.parentNode.insertBefore(bp, s);
		})();
	</script>
	<script src="js/jquery-3.2.1.js"></script>
	<script>
		$('.collection').click(function() {
			//$(this).children().last()

			if ($(this).children().last().hasClass('off')) {
				$(this).children().last().removeClass("off").addClass('on')
				var labelId = $(this).children().last().attr("label-id");
				$.ajax({
                    async: false,
                    url: "${ctx}/userAction_addLabel",
                    data: {
                    	labelId: labelId
                    },
                    type: "POST",
                    success: function() {
                    	
                    }
                });
			} else {
				($(this).children().last().removeClass("on").addClass('off'))

                var labelId = $(this).children().last().attr("label-id");
                $.ajax({
                    async: false,
                    url: "${ctx}/userAction_removeLabel",
                    data: {
                        labelId: labelId
                    },
                    type: "POST",
                    success: function() {
                        
                    }
                });
			}
				
			$('#recommended-footer').children().first().removeClass('disabled');
		});
		
		$('#recommended-footer').children().first().on("click", function () {
			$(location).attr('href', '${ctx}/bookAction_toIndex');
		})
		
		$('.skip').on("click", function () {
			$(location).attr('href', '${ctx}/jsp/user_edit.jsp');
		})
	</script>
</body>
</html>